<template>
	<view class="setup3">
		<input class="title" type="text" placeholder="输入文章标题" placeholder-style="font-size:16px; color:#c3c3c3">
		<textarea class="content" v-model="txt" placeholder="请输入文字" placeholder-style="font-size:14px ; color:#c3c3c3"
			confirm-type="send"></textarea>
			
			<!-- 弹出层 -->
		<view class="pop">
			<button @click="open" class="btn" >添加封面图</button>
			<uni-popup ref="popup" type="bottom"  maskBackgroundColor="rgba(0,0,0,0.4)">
				<view class="btngroup">
					<button>拍照</button>
					<button>从相册选择</button>
				</view>
			</uni-popup>
		</view>
		
		<!-- 发布按钮 -->
		<button class="btn2">发布</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				txt: ""
			}
		},
		watch: {
			txt(txt) {
				if (txt.indexOf('\n') != -1) { //敲了回车键了
					uni.hideKeyboard() //收起软键盘
				}
			}
		},

		methods: {
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			}
		}
	}
</script>

<style scoped lang="scss">
	.setup3 {
		display: flex;
		flex-direction: column;
		margin: 30rpx 40rpx;

		.title {
			background-color: #fff;
			height: 80rpx;
			border-radius: 20rpx;
			padding: 20rpx
		}

		.content {
			margin: 20rpx 0;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			width: 100%;
		}
		
		.pop{
			
			.btngroup{
				display: flex;
				flex-direction: column;
				
				button{
					width: 750rpx;
					font-size: 14px;
					height: 100rpx;
					line-height: 100rpx;
				}
			}
			
			.btn{
				margin-top: 10rpx;
				width: 100%;
				height: 400rpx;
				border-radius: 20rpx;
				border: 1px solid #a0a0a0;
				background-color: #ECECEC;
				color: #a0a0a0;
				line-height: 400rpx;
			}
		}
		
		.btn2{
			margin-top: 80rpx;
			width: 100%;
			background-color: #3E64FF;
			color: #fff;
			font-size: 14px;
			font-weight: 800;
			height: 90rpx;
			line-height: 90rpx;
		}
	}
</style>
